﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="form-actions">
    <div style="float: left; margin-top: 24px;">
        <p>
            Xem nhanh:
            <button id="btn-thismonth" class="btn btn-inverse" type="button">Tháng này</button>
            <button id="btn-7day" class="btn btn-inverse" type="button">7 Ngày</button>
            <button id="btn-thisweek" class="btn btn-inverse" type="button">Tuần này</button>
            <button id="btn-yesterday" class="btn btn-inverse" type="button">Hôm qua</button>
            <button id="btn-today" class="btn btn-inverse" type="button">Hôm Nay</button>
        </p>
    </div>
    <div style="float: right">
        <table>
            <thead>
                <tr>
                    <th>Năm</th>
                    <th>Tháng</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <select name="year">
                            <option value="0">All</option>
                            <option value="2013">2013</option>
                            <option value="2014">2014</option>
                            <option value="2015">2015</option>
                        </select>
                    </td>
                    <td>
                        <select name="month">
                            <option value="-1">All</option>
                            @for (int i = 1; i <= 12; i++)
                            {
                                <option value="@i">Tháng @i</option>
                            }
                        </select>
                    </td>
                    <td style="padding: 0 0 10px 10px">
                        <button type="submit" class="btn btn-primary">Xem</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="content div-block">
    <h5>Lượt click</h5>
    <h3 style="color: red;" id="h3-click"></h3>
</div>
<div class="content div-block">
    <h5>Order thành công</h5>
    <h3 style="color: red;" id="h3-order"></h3>
</div>
<div class="content div-block">
    <h5>Số tiền</h5>
    <h3 style="color: red;" id="h3-money"></h3>
</div>
<div id="byhand-chart" class="div-chart" style="width: 90%">
</div>
<div class="div-chart" style="margin-top: 20px">
    <h4 style="text-align: center">Top Quảng cáo</h4>
    <table class="table table-hover sort table-bordered">
        <thead>
            <tr>
                <th>Email
                </th>
                <th>Click
                </th>
                <th>Order Done
                </th>
                <th>Total Money
                </th>
            </tr>
        </thead>
        <tbody id="tbody-user">
        </tbody>
    </table>
</div>
<div class="div-chart" style="margin-top: 20px">
    <h4 style="text-align: center">Top Quảng cáo</h4>
    <table class="table table-hover sort table-bordered">
        <thead>
            <tr>
                <th>Website
                </th>
                <th>Click
                </th>
                <th>Order Done
                </th>
                <th>Total Money
                </th>
            </tr>
        </thead>
        <tbody id="tbody-domain">
        </tbody>
    </table>
</div>
<div id="test"></div>
<script type="text/javascript">
    $('#btn-thismonth').click(function () {
        getStatistic('thismonth', this);
    });
    $('#btn-7day').click(function () {
        getStatistic('7day', this);
    });
    $('#btn-thisweek').click(function () {
        getStatistic('thisweek', this);
    });
    $('#btn-yesterday').click(function () {
        getStatistic('yesterday', this);
    });
    $('#btn-today').click(function () {
        getStatistic('today', this);
    });
    function getStatistic(time, ele) {
        $.post('@Url.Action("GetStatistic", "Home")', { time: time }, function (data) {
            $('#order-chart').html('');
            $('#click-chart').html('');
            $('#h3-click').text(data.totalclick);
            $('#h3-order').text(data.totalorder);
            $('#h3-money').text(data.totalmoney);
            var clicksArr = new Array();
            for (var i = 0; i < data.dataclick.length; i++) {
                clicksArr.push(data.dataclick[i].click);
            }
            var ordersArr = new Array();
            for (var i = 0; i < data.dataorder.length; i++) {
                ordersArr.push(data.dataorder[i].order);
            }
            var colArr = new Array();
            for (var i = 0; i < data.dataclick.length; i++) {
                colArr.push(data.dataclick[i].day);
            }
            $('#byhand-chart').highcharts({
                chart: {
                    zoomType: 'xy'
                },
                title: {
                    text: 'Thông kê trong ' + $(ele).text()
                },
                subtitle: {
                    text: 'ByHand.vn'
                },
                xAxis: [{
                    categories: colArr
                }],
                yAxis: [{ // Primary yAxis
                    labels: {
                        format: '{value} clicks',
                        style: {
                            color: '#4572A7'
                        }
                    },
                    title: {
                        text: 'Clicks',
                        style: {
                            color: '#4572A7'
                        }
                    },
                    min: 0,
                },
                { // Secondary yAxis
                    title: {
                        text: 'Orders',
                        style: {
                            color: '#89A54E'
                        }
                    },
                    labels: {
                        format: '{value} orders',
                        style: {
                            color: '#89A54E'
                        }
                    },
                    opposite: true,
                    min: 0,
                }],
                tooltip: {
                    shared: true
                },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    x: 120,
                    verticalAlign: 'top',
                    y: 100,
                    floating: true,
                    backgroundColor: '#FFFFFF'
                },
                series: [{
                    name: 'clicks',
                    color: '#4572A7',
                    type: 'column',
                    data: clicksArr,
                    tooltip: {
                        valueSuffix: 'clicks'
                    }
                },
                {
                    name: 'orders',
                    color: '#89A54E',
                    type: 'spline',
                    yAxis: 1,
                    data: ordersArr,
                    tooltip: {
                        valueSuffix: ' order'
                    }
                }]
            });
        });
        $.post('@Url.Action("GetRefStatistic", "Home")', { time: time }, function (data) {
            $('#tbody-user').html('');
            $('#tbody-domain').html('');
            var tHtml = '';
            var dHtml = '';
            for (var i = 0; i < data.users.length; i++) {
                tHtml += '<tr>'
                        + '<td>' + data.users[i].email + '</td>'
                        + '<td>' + data.users[i].click + '</td>'
                        + '<td>' + data.users[i].order + '</td>'
                        + '<td>' + data.users[i].money + '</td>'
                        + '</tr>'
            }
            for (var i = 0; i < data.domains.length; i++) {
                dHtml += '<tr>'
                        + '<td>' + data.domains[i].domain + '</td>'
                        + '<td>' + data.domains[i].click + '</td>'
                        + '<td>' + data.domains[i].order + '</td>'
                        + '<td>' + data.domains[i].money + '</td>'
                        + '</tr>'
            }
            $('#tbody-user').html(tHtml);
            $('#tbody-domain').html(dHtml);
        });
    }
</script>
